<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>搜索详情页</title>
    <!-- 界面 -->
<link href="../css/swiper.min.css" rel="stylesheet" type="text/css">

<link href="../css/mian.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="../css/iconfont.css">
<!-- 引入layui -->
<link rel="stylesheet" href="../webjars/layui/2.5.6/css/layui.css"
	type="text/css">

<!--主要样式-->
<link rel="stylesheet" type="text/css" href="../statics/css/style.css" />

<!--图标样式-->
<link rel="stylesheet" type="text/css" href="../statics/css/icon.css" />

<!-- 引入Vue -->
<script src="../js/vue.min.js"></script>
<!-- 引入axios -->
<script type="text/javascript"
	src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script type="text/javascript" src="../webjars/layui/2.5.6/layui.all.js"></script>
    <link rel="stylesheet" type="text/css" href="./static/css/semantic.min.css">
    <link rel="stylesheet" href="./static/css/index.css">
    
    
    <script type="text/javascript" src="../js/top.js"></script>
<style type="text/css">
p[id*=p]{
	overflow:hidden;

	text-overflow:ellipsis;
	
	display:-webkit-box;
	
	-webkit-line-clamp:2;
	
	-webkit-box-orient:vertical;
}
    
</style>
</head>
<body>

		<div id = "header">
		<top></top>
	</div>
		<script type="text/javascript">
			new Vue({
				el:"#header",
			})
			</script>

		<!-- 搜索框-->

		<div class="search-box">

			<div class="search-close">
				<i class="iconfont icon-guanbi"></i>
			</div>

			<div class="search-con">

				<dl class="se">

					<div name="formsearch" method="post">

						<input type="hidden" name="kwtype" value="0" />

						<dt>

							<input name="q" type="text" class="search-keyword"
								v-model="keyword" id="search-keyword" :value="keyword"
								onfocus="if(this.value=='输入搜索关键词'){this.value='';}"
								onblur="if(this.value==''){this.value='输入搜索关键词';}" />

						</dt>

						<dd>
							<a target="_blank" @click="search"><button>
									<i class="iconfont icon-sousuo"></i>
								</button></a>

						</dd>

					</div>

				</dl>

				<div class="search-tips">大家都在搜</div>

				<div class="search-as">
					<a v-for="(l,i) in list" target="_blank"
						:href="'article.html?uaid='+l.uaid">{{l.utitle}}</a>
				</div>

			</div>

		</div>

		<script type="text/javascript">
		var v = new Vue({
			el : ".search-box",
			data : {
				keyword:"",
				list : [],
			},created(){
				axios.post("../search/log.s").then(res=>{
					this.list = res.data;
				})
			},
			methods : {
				search(){
					var params = new URLSearchParams();
					params.append("keyword",this.keyword);
					axios.post("../search/mianSearch.s",params).then(res=>{
						if(res.data.code==1){
							location.href="../seacher/index.html?log="+this.keyword+"&page=1";
						}else{
							alert(res.data.msg);
						}
					})
				}
			}
		})
	
	</script>
<!--中间-->

<div class="m-container m-padded-tb-big">
    <div class="ui container">
        <div class="ui stackable grid">
            <!--left-->
            <div class="eleven wide column" style="margin: 0px 10%;width: 80%!important;">
                <!--header-->
                <div class="ui top attached segment">
                    <div class="ui middle aligned two column grid">
                        <div class="column">
                            <h3 class="ui teal header">搜索详情</h3>
                        </div>
                        <div class="right aligned column">
                            共 <h3 class="ui orange header m-inline-block m-text-thin">{{count}}</h3>篇
                        </div>
                    </div>
                </div>
                <!--中间列表-->
                <div class="ui attached  segment">
                    <div class="ui padded vertical segment m-padded-tb-large" v-for="(s,i) in shows">

                        <div class="ui mobile reversed stackable grid">
                            <div class="ui eleven wide column" style="width: 100%!important;">
                                <h3 class="ui header">{{s.utitle}}</h3>
                                <!-- 文字显示部分 -->
                                <div :id="'d'+s.uaid" style="display:none;" v-html="s.ucontent"></div>
                                <p :id="'p'+s.uaid" class="m-text" v-html="s.ucontent"></p>
                                <div class="ui grid">
                                    <div class="eleven wide column">
                                        <div class="ui mini horizontal link list">
                                            <div class="item">
                                                <img :src="user[i].image" alt="" class="ui avatar image">
                                                <div class="content">
                                                	<!-- 作者名点击跳转到作者主页 -->
                                                    <a href="#" class="header" v-html="user[i].name"></a>
                                                </div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon"></i>{{s.createTime}}
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i>{{s.visit}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="right aligned five wide column" >
                                        <a :href="'../demo/article.html?uaid='+s.uaid" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">阅读原文</a>
                                    </div>
                                </div>
                            </div>


                            <div class="ui five wide column" style="width: 30%!important;">
                                <a href="blog.html" target="_blank">
                                    <img :src="s.uimage" alt="" class="ui rounded image" style="width: 150px;">
                                </a>
                            </div>

                        </div>
                    </div>

                </div>
                <!--footer-->
                <div class="ui bottom attached segment">
                    <div class="ui middle aligned two column grid">
                        <div class="column" style="width: 20%">
                            <a :href="'index.html?log='+log+'&page='+(page-1)" class="ui mini teal basic button">上一页</a>
                        </div>
                         <!-- 页码 -->
                        <div id = "ym" style="width: 60%;margin-top: 1.5%">
                        	<a v-for="p of pages" :href="'index.html?log='+log+'&page='+p" style="padding: 1%;border: 1px solid #4183C4;">{{p}}</a>
                        </div>
                        <div class="right aligned column" style="width: 20%">
                            <a :href="'index.html?log='+log+'&page='+(page+1)" class="ui mini teal basic button">下一页</a>
                        </div>
                       
                    </div>
                </div>

            </div>


            <!-- 左侧 -->
           <!--  <div class="five wide column">
                
            </div> -->
        </div>
    </div>



</div>


<script type="text/javascript">
	var v =new Vue({
		el : ".m-container",
		data : {
			shows : [],
			//总条数
			count : "",
			user : [],
			//总页数
			pages : 1,
			//当前页
			page : 1,
			//当前log标签
			log : "",
		},
		created(){
			let log = location.search.replace(/\?log=(.+)&.*$/, "$1");
			this.log = log;
			console.info(log)
			let page1 = parseInt(location.search.replace(/\?log=.+&page=(\d+)$/, "$1"));
			if(page1>0){
				this.page=page1;
			}else{
				this.page=1;
			}
			
			
			var params = new URLSearchParams();
			params.append("log",log);
			params.append("page",this.page);
			axios.post("../search/getCount.s",params).then(res=>{
				this.count = res.data;
			});
			axios.post("../search/getName.s",params).then(res=>{
				this.user = res.data;
			});
			axios.post("../search/showSearch.s",params).then(res=>{
				this.shows = res.data;
				this.pages = parseInt(this.count/5);
				this.pages += this.count % 5==0?0:1;
			});
			
			
		},
		updated(){
  			for( let a of this.shows) {
   				let d = document.getElementById("d"+a.uaid);
   				let p = document.getElementById("p"+a.uaid);
   				//替换空格
   				p.innerText = d.innerText.replace(/\s+/g,"");
   			} 
		}
	});

</script>
<!--底部-->
<footer class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="./static/images/weixin.jpg" alt="" class="ui rounded image" style="width: 110px;">
                    </div>
                </div>

            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">用户故事（User Story）</a>
                    <a href="#" class="item">用户故事（User Story）</a>
                    <a href="#" class="item">用户故事（User Story）</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">用户故事（User Story）</a>
                    <a href="#" class="item">用户故事（User Story）</a>
                    <a href="#" class="item">用户故事（User Story）</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header">最新博客</h4>
                <div class="ui inverted link list">
                    <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这的人有所帮助.......</p>
                </div>
            </div>
        </div>

        <div class="ui inverted section divider">

        </div>
        <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 若相遇、请珍惜 2018</p>

    </div>



</footer>



<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/semantic.min.js"></script>

<script>
    $(".m-mobile-show").click(function () {
        $(".m-item").toggleClass("m-mobile-hide");
    })
</script>
<script type="text/javascript" src="../js/jquery.min.js"></script>

	<script type="text/javascript" src="../js/swiper.min.js"></script>

	<script type="text/javascript" src="../js/slide.js"></script>
</body>
</html>